<template>
    <el-dialog title="关联推广模板" :visible.sync="show" center :before-close="cancel">
        <el-table ref="tableList" :data='modelList' @selection-change="handleSelectChange">
            <el-table-column type="selection" align="center">

            </el-table-column>
            <el-table-column prop="modelName" label="推广模板名称" align="center">

            </el-table-column>
            <el-table-column label="推广模板类型"  align="center">
                <template slot-scope="scope">
                    {{ scope.row.modelType==1?'服务':'平台' }}
                </template>
            </el-table-column>
            <el-table-column label="是否默认" width="100" align="center">
              <template slot-scope="scope">
                <el-switch v-show="judgeSelected(scope.row.promoteModelId)"  @change="handleSwitchChange(scope.row.promoteModelId)" v-model="scope.row.defaultFlag" :active-value="1"
                  :inactive-value="0">

                </el-switch>
              </template>
            </el-table-column>
        </el-table>
        <div slot="footer">
            <el-button type="primary" @click="confirm">
                确认
            </el-button>
            <el-button  @click="cancel">
                取消
            </el-button>
        </div>
    </el-dialog>
</template>

<script>
    import PromoModelApi from '@/api/operation/promoteModel'
    export default {
        props:{
            show:{
                type:Boolean,
            },
            id:{
                type:Number|String
            }
        },
        data(){
            return{
                modelList:[],
                list:[]
            }
        },
        watch:{
            async show(val){
                if(val){
                    let res = await PromoModelApi.promoteModelList()
                    this.modelList = res.data
                    let res2 = await PromoModelApi.promoteModelList({serverModelId:this.id})
                    this.list = res2.data.map(item=>({promoteModelId:item.promoteModelId,defaultFlag:item.defaultFlag}))

                    // 需要把表格中哪些选择中，并且是否存在默认值也要辅助
                    this.list.forEach(item=>{
                        this.modelList.find(item2=>{
                            if(item.promoteModelId==item2.promoteModelId){{
                                item2.defaultFlag = item.defaultFlag
                                this.$refs.tableList.toggleRowSelection(item2,true)
                                return
                            }}
                        })
                    })
                }
            }
        },
        methods: {
            //通过promoteModelId判断哪些是选中的
            judgeSelected(promoteModelId){
                return this.list.some(item=>item.promoteModelId==promoteModelId)
               
            },
            handleSelectChange(val){
                this.list = val.map(item=>({
                    promoteModelId:item.promoteModelId,
                    defaultFlag:item.defaultFlag
                }))
            },
            handleSwitchChange(promoteModelId) {
                this.modelList.forEach(item=>{
                    if(item.promoteModelId==promoteModelId){
                        item.defaultFlag = 1
                    }else{
                        item.defaultFlag = 0
                    }
                })
                this.list.forEach(item=>{
                    if(item.promoteModelId==promoteModelId){
                        item.defaultFlag = 1
                    }else{
                        item.defaultFlag = 0
                    }
                })
            },
            confirm(){
                const params = {
                    list:this.list,
                    serverModelId:this.id
                }
                PromoModelApi.setRelation(params).then(()=>{
                    this.$Utils.notifySuccess("关联成功")
                    this.$emit('confirm')
                })
                
            },
            cancel(){
                this.$emit('cancel')
            }
        },

    }
</script>

<style lang="scss" scoped>

</style>